<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="search-container">
        <el-input
          v-model="listQuery.uid"
          placeholder="飞友UID"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.name"
          placeholder="人员名称"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.tel"
          placeholder="联系方式"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-button class="filter-item" type="primary" @click="handleFilter">
          {{ $t("table.search") }}
        </el-button>
      </div>
      <el-button v-if="Number(type) === 1" class="filter-item" type="primary" @click="onAsync">
        下发
      </el-button>
    </div>

    <div class="face-container">
      <div
        v-for="item in list"
        :key="item.id"
        class="box-container"
        @click="onChange(item.uid)"
      >
        <el-avatar shape="square" :size="140" fit="cover" :src="item.faceImg">
          <img src="@/assets/error.png">
        </el-avatar>
        <div class="text-container">
          <div>{{ item.name }}</div>
          <div>{{ item.uid }}</div>
        </div>

        <div class="check-box">
          <el-checkbox
            :value="actions.includes(item.uid)"
            style="pointer-events: none"
          />
        </div>
      </div>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />

    <el-dialog title="操作" width="320px" :visible.sync="dialogVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
      >
        <el-form-item label="设备" prop="deviceId">
          <el-select
            v-model="temp.deviceId"
            class="filter-item"
            placeholder="请选择设备"
          >
            <el-option
              v-for="item in deviceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          {{ $t("table.cancel") }}
        </el-button>
        <el-button type="primary" @click="save">
          {{ $t("table.confirm") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { fetchList } from '@/api/member'
import { deviceList, syncUsetToDevice } from '@/api/device'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 30,
        uid: '',
        name: '',
        tel: ''
      },
      actions: [],
      dialogVisible: false,
      temp: {
        id: undefined,
        deviceId: '',
        uids: []
      },
      rules: {
        deviceId: [
          { required: true, message: '设备是必填项', trigger: 'change' }
        ]
      },
      deviceList: []
    }
  },
  computed: {
    ...mapGetters([
      'type'
    ])
  },
  created() {
    this.getList()
    this.getDeviceList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then((response) => {
        const { records, total } = response.object
        this.list = records || []
        this.total = total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.current = 1
      this.getList()
    },
    getDeviceList() {
      deviceList({ current: 1, size: 1000 }).then((response) => {
        const { records } = response.object
        this.deviceList = records || []
      })
    },
    onChange(id) {
      const index = this.actions.indexOf(id)
      if (index > -1) {
        this.actions.splice(index, 1)
        return
      }
      if (this.actions.length > 5) {
        return this.$message.error('最多选择6个')
      }
      this.actions.push(id)
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        deviceId: '',
        uids: []
      }
    },
    onAsync() {
      if (this.actions.length === 0) {
        return this.$message.error('请选择人脸')
      }
      this.resetTemp()
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    save() {
      this.temp.uids = this.actions
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const formData = new FormData()
          formData.append('deviceId', this.temp.deviceId)
          formData.append('uids', this.actions)
          syncUsetToDevice(formData).then(() => {
            this.handleFilter()
            this.dialogVisible = false
            this.$notify({
              title: '成功',
              message: '下发成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.face-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.box-container {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 5px;
  overflow: hidden;
  background: #f5f5f5;
  cursor: pointer;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.check-box {
  position: absolute;
  top: 4px;
  right: 4px;
}
.text-container {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  padding: 4px 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  backdrop-filter: blur(6px);
}
</style>
